<!--传入一个function用来接index；传入一个数组用来渲染tab内容-->
<template>
  <div class="box">
    <ul >
      <li v-for="(item , index) in tabBar" @click="chose(index)" :class="[{'active':choseBar==index}, {'specialWid':specialWid}]">{{item.name}}</li>
    </ul>
  </div>
</template>

<script type="text/javascript">
//  import { mapActions } from 'vuex'
  export default{
    data () {
      return {
        choseBar: 0
      }
    },
    props: {
      tabBar: {
        type: Array,
        default: function () {
          return [{
            name: '全部'
          }, {
            name: '沪市'
          }, {
            name: '深市'
          }, {
            name: '创业板'
          }]
        }
      },
      onSelected: {
        type: Function
      },
      selectIndex: {
        default: 0
      },
      specialWid: false
    },
    methods: {
      chose (index) {
        if (this.choseBar != index) {
          this.choseBar = index
        }
        this.onSelected(index)
      }
    },
    created () {
      this.choseBar = this.selectIndex
    }
  }
</script>

<style scoped lang="less">
  @import '../../assets/css/variables.less';
  .box{
    display:flex;
    justify-content:center;
    font-size: .14rem;
    color: @blue-a;
    margin: 0.15rem 0;
  }
  ul{
    box-sizing: border-box;
    overflow: hidden;
    border:1px @blue-a solid;
    font: .12rem/.3rem PingFang-SC;
    padding:0;
    border-radius: 0.04rem;
    height:0.3rem;
    display:flex;
    flex-wrap:nowrap;
    margin: 0;
  }
  li{
    display: inline-flex;
    justify-content: center;
    align-items: center;
  	width: .865rem;
    list-style:none;
    height:0.3rem;
    font-size: .14rem;
    border-right:1px @blue-a solid;
  }
  li.specialWid{
    width: 1.1rem;
  }
  li:last-child{
    border:none;
  }
  .active{
    background-color: @blue-a;
    color:white;
  }
</style>
